import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { Descriptions, PageHeader, Tag } from 'antd'
// 引入moment之前需要执行 npm i moment 指令安装这个包，这个包可以处理时间戳
import moment from 'moment'

export default function NewsPreview(props) {

    // 用于存储获取到的新闻的相关信息
    const [newInfo, setNewInfo] = useState(null)

    // 获取新闻的相关信息
    useEffect(() => {
        // 因为当前组件是路由组件，所以可以通过props.match.params.id获取的是当前路由路径中的id值，根据这个id值去后端请求数据
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            setNewInfo(res.data)
        })
    }, [props])

    // 存储新闻的状态和状态对应的样式
    const auditList = ["未审核", "审核中", "已通过", "未通过"]
    const publishList = ["未发布", "待发布", "已发布", "已下线"]
    const colorList = ["#2db7f5", "orange", "green", "red"]

    return (
        <div>
            {
                // 如果newInfo不为空，那么就展示后面的div标签内容
                newInfo && <div>
                    <PageHeader
                        ghost={false}
                        // 返回箭头的点击事件回调，点击后使得路由地址返回到上一次，使得对应的路由组件
                        onBack={() => window.history.back()}
                        title={newInfo.title}
                        subTitle={newInfo.category.title}
                    >
                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">{newInfo.author}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">
                                {/* 对获取到的新闻信息中的时间信息进行处理 */}
                                {moment(newInfo.createTime).format('YYYY年MM月DD日 HH:mm:ss')}
                            </Descriptions.Item>
                            <Descriptions.Item label="发布时间">
                                {/* 对获取到的新闻信息中的时间信息进行处理 */}
                                {newInfo.publishTime ? moment(newInfo.createTime).format('YYYY年MM月DD日 HH:mm:ss') : '-'}
                            </Descriptions.Item>
                            <Descriptions.Item label="区域">{newInfo.region}</Descriptions.Item>
                            <Descriptions.Item label="审核状态">
                                {/* newInfo.auditState 值为一个数字，这个数字决定该新闻的状态和样式，将新闻的所有状态和对应的样式存进一个数组，根据获取到的数字作为下标去数组中拿状态和样式 */}
                                <Tag color={colorList[newInfo.auditState]}>{auditList[newInfo.auditState]}</Tag>
                            </Descriptions.Item>
                            <Descriptions.Item label="发布状态">
                                {/* newInfo.auditState 值为一个数字，这个数字决定该新闻的状态和样式，将新闻的所有状态和对应的样式存进一个数组，根据获取到的数字作为下标去数组中拿状态和样式 */}
                                <Tag color={colorList[newInfo.publishState]}>{publishList[newInfo.publishState]}</Tag>
                            </Descriptions.Item>
                            <Descriptions.Item label="访问量">{newInfo.view}</Descriptions.Item>
                            <Descriptions.Item label="点赞数量">{newInfo.star}</Descriptions.Item>
                            <Descriptions.Item label="评论数量">0</Descriptions.Item>
                        </Descriptions>
                    </PageHeader>

                    {/* 新闻文本内容展示区 */}
                    <div 
                        dangerouslySetInnerHTML={{
                            // 对新闻的文本内容进行HTML格式解析
                            __html: newInfo.content
                        }} 
                        style={{ 
                            height: "320px", border: "1px solid #e9e9e9", padding: "0 24px", margin: "0 24px", backgroundColor: "#fafafa", overflow: "auto" 
                        }}
                    ></div>
                </div>
            }
        </div>
    )
}
